<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				font-size: initial;
				color: white;
			}
			div{
				text-align: center;
			}
			body{
				width: 100%;
			}
			.floor{
				width: 100%;
				display: -webkit-flex;
				-webkit-flex-direction: column;
			}
			.floor li{
				height: 224px;
			}
			
			
			
			.floor li:nth-child(1){
				-webkit-flex: 1;
				background: blueviolet;
			}

			.floor li:nth-child(2) .one{
				-webkit-flex: 1;
				border: 1px solid white;
				
			}
			
			.floor li:nth-child(2) .one:nth-child(1){
				-webkit-flex: 1;
			}
			.floor li:nth-child(2) .one:nth-child(2){
				-webkit-flex: 1;
				display: -webkit-flex;
				-webkit-flex-direction: column;

			}
			.floor li:nth-child(2) .one:nth-child(3){
				-webkit-flex: 1;
				display: -webkit-flex;
				-webkit-flex-direction: column;
				
			}
			
			.one>div{
				-webkit-flex: 1;
				border: 1px solid white;
				text-align: center;
				line-height: 100px;
			}
			
			
			.floor li:nth-child(2){
				-webkit-flex: 1;
				display: -webkit-flex;
				-webkit-flex-direction: row;
				background: green;
				
				
			}
			.floor li:nth-child(3){
				-webkit-flex: 1;
				background: greenyellow;
				display: -webkit-flex;
				-webkit-flex-direction: row;
			}
			
			.two{
				border: 1px solid bisque;
				
			}
			.two>div{
				border: 1px solid bisque;
				text-align: center;
				line-height: 100px;
				color: red;
			}
			.two:nth-child(1){
				-webkit-flex: 1;
			}
			.two:nth-child(2){
				-webkit-flex: 1;
				display: -webkit-flex;
				-webkit-flex-direction: column;
			}

			.two:nth-child(3){
				-webkit-flex: 1;
				display: -webkit-flex;
				-webkit-flex-direction: column;
			}
			.two>div:nth-child(1){
				-webkit-flex: 1;
				
			}
			.two>div:nth-child(2){
				-webkit-flex: 1;
			}
						
			.floor li:last-child{
				display: flex;
				height: 30px;
				-webkit-flex: 1;
			}
			.floor li:last-child>div{
				float: left;
				width: 20%;
				color: black;
				border: 1px solid #ccc;
				text-align: center;
				line-height: 30px;
			}	
		</style>
	</head>
	<body>

			<ul class="floor">
				<li></li>
				<li>
					<div class="one"></div>
					<div class="one">
						<div >海外酒店</div>
						<div >团购</div>
					</div>
					<div class="one">
						<div >特惠酒店</div>
						<div >客栈公寓</div>
					</div>
				</li>
				
				<li>
					<div class="two"></div>
					<div class="two">
						<div >海外酒店</div>
						<div >团购</div>
					</div>
					<div class="two">
						<div >特惠酒店</div>
						<div >客栈公寓</div>
					</div>
				</li>
				<li>
					<div class="f1">
						首页
					</div>
					<div class="f2">
						积分区
					</div>
					<div class="f3">
						分类
					</div>
					<div class="f4">
						购物车
					</div>
					<div class="f5">
						个人中心
					</div>
				</li>
			</ul>
	</body>
</html>
